
import React from "react"
import Appcss1 from "./css/Reg.module.css"
import fanh from '../../assets/icons/返回箭头.png'
import { List,  InputItem} from 'antd-mobile';
import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
import { setInterval, setTimeout ,clearInterval} from "timers";
// import { createForm } from 'rc-form';
// import Logo from '../assets/icons/logo.png'
class Shouyzm extends React.Component {
    constructor(){
        super()
        this.state={
            time:"",
            yinc:"",
            yzm:"",
            phone:""
        }
    }
    ipt1(e){
        // var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
        // if(!uPattern.test(e.target.value)){
        this.setState({
            yzm:e.target.value,
        })
    // }else{
    //         alert(1111)
    //     }
    }

    componentWillMount(){
        console.log(this.props.location)
        console.log(this.props.location.phone)
        this.setState({
            phone:this.props.location.phone
         })
        var arr=this.props.location.phone.split("")
        console.log(arr)
        var newarr=arr.map(function (item,index,arr) {
            if((index>2)&&(index<7)){
                item="*"
                 console.log(item);
                return item;
               
            }
           else return item;
        })
        console.log(newarr)
        
        console.log( this.state.yinc)
        this.setState({
           yinc:newarr.join("")
        })
        var i=59;
        var a=60;
        var t=setInterval(() => {
           
            this.setState({
                time:i--
             })
             if(i==0){
                 a=0
                 clearInterval(t)
             }
        }, 1000);
   
    // console.log(this.state.time);
    
    }

    send(){
        


        fetch(`http://106.12.10.151:3000/captcha/verify?phone=${this.props.location.phone}&captcha=${this.state.yzm}`,{  credentials:'include'})
        .then(body=>body.json())
        .then(res=>{
            if(res.code==200){
                Toast.loading('success...', 1, () => {
                    this.props.history.push({pathname:"/password",phone:this.props.location.phone,captcha:this.state.yzm})
                  });
               
            }
            else{
                Toast.fail('验证码不正确', 1); 
            }
        })
        // .catch(
        //     Toast.fail('账号或密码错误', 1);
        // )
    }
    fanh(){
        this.props.history.push({pathname:"/register"})
    }
    render(){
        return(
           
        <div className={Appcss1.cel_log}>
             <div className={Appcss1.cel_zc}>
                <span id={Appcss1.cel_fh}  onClick={this.fanh.bind(this)}><img src={fanh} width='100%' height='100%' alt=''/></span>
                <span id={Appcss1.cel_reg}>手机号注册</span>
                
            </div>
            <div >
            <h5>验证码已发送至</h5>
        <h4>{this.state.yinc}</h4>
         <span id={Appcss1.cel_time}>{this.state.time+"s"}</span>
             </div>
             <div >
               <input type="text" className={Appcss1.cel_pa} placeholder="请输入验证码"  onChange={this.ipt1.bind(this)} value={this.state.yzm}></input>
             </div>
             
            
			<button className={Appcss1.cel_re} onClick={this.send.bind(this)}>下一步</button><br/>
            {/* <span className={Appcss.cel_qtdl}>&lt;其他登录方式</span> */}
		</div>
    
        )
    }



}
// const Cell_login1 = createForm()(Cell_login);
export default Shouyzm